<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>滚</title>
        <style type="text/css">
            div {
                border: 1px solid blue ;
                width: 200px ;
                height: 100px ;
                margin: 30px auto ;
            }

            marquee {
                border: 1px solid red ;
            }
        </style>
    </head>
    <body>

        <ul>
            <li>marquee 标签可以实现 文字 或 图片 的滚动效果</li>
            <li>marquee 的 behavior 属性用来设置 行为方式( scroll | slide | alternate )</li>
        </ul>

        <div>
            <marquee behavior="scroll " direction="left">
                大家好，才是真的好！
            </marquee>
        </div>

        <div>
            <marquee behavior="alternate" direction="right">
                大家好，才是真的好！
            </marquee>
        </div>

        <div>
            <marquee behavior="scroll" direction="up">
                大家好，才是真的好！
            </marquee>
        </div>

        <div>
            <marquee behavior="scroll" direction="down">
                大家好，才是真的好！
            </marquee>
        </div>

        <div>
            <marquee behavior="scroll" direction="left" scrollamount="100" scrolldelay="1000">
                大家好，才是真的好！
            </marquee>
        </div>
        
    </body>
</html>